<template>
    <div class="container">
        <div class="head">
            <img class="close" src="@/assets/images/close.png" @click="updateReceive">
            <div class="info">
                <div class="top b">
                    <img v-if="imgurl" :src="getOtherImageUrl(img_url ? img_url : imgurl)">
                    <div class="detail l">
                        <div class="price bold">
                            <span class="f12">￥</span>
                            <span class="num">{{ allPrice.dayRent ? allPrice.dayRent : default_price }}</span>
                            <span class="f12">/天</span>
                        </div>
                        <div class="selected">
                            <span class="f12">已选:{{ showSelectConfig }}</span>
                        </div>
                    </div>
                </div>
                <AllPriceDetail :a="allPrice.firstRent_new" :b="allPrice.totalRent" :c="allPrice.totalValue">
                </AllPriceDetail>
            </div>
        </div>
        <div class="strong-line"></div>
        <div class="config">
            <div class="cell">
                <span class="title">租赁方式</span>
                <div class="list">
                    <span class="option" v-for="(item, index) in lease" :key="index" v-show="findFlag(index)"
                        @click="selectIndex(3, index)" :class="{ active: selectConfig[3] === index }">{{ item }}</span>
                </div>
            </div>
            <div class="cell" v-for="(ele, attr, index) in mainConfig" :key="attr">
                <span class="title">{{ mainConfigTitle[index] }}</span>
                <div class="list">
                    <span class="option" v-for="(item, key) in ele" :key="ele.id" @click="selectIndex(index, key)"
                        :class="{ active: selectConfig[index] === key }">
                        {{ item.value }}
                    </span>
                </div>
            </div>
            <div class="quantity f14">
                <span class="value">租赁数量</span>
                <div class="change">
                    <div class="reduce" @click="changeValue(false)">
                        <span></span>
                    </div>
                    <span class="buy-value">{{ buyNumber }}</span>
                    <div class="increase" @click="changeValue(true)">
                        <span></span>
                        <span></span>
                    </div>
                </div>
            </div>
        </div>
        <div class="see" :class="{ active: selectActive }" @click="SeeSeeClick">
            <span>查看免押额度</span>
        </div>
    </div>
</template>
<script>
import AllPriceDetail from "@/components/Goods/AllPriceDetail.vue"
export default {
    name: "DrawerSelectConfig",
    props: {
        id: Number,
        activity_id: Number,
        imgurl: String,
        default_price: String,
        updateReceive: Function,
    },
    components: {
        AllPriceDetail
    },
    data() {
        return {
            buyNumber: 1,
            selectConfig: [null, null, null, null],
            selectActive: false,
            showSelectConfig: "",
            pact_type: [],
            attrData: [],
            lease: ["租完归还/续租/买断", "租完即送"],
            mainConfigTitle: ["颜色", "规格", "租期"],
            mainConfig: {
                colorConfig: [],
                capacityConfig: [],
                timeConfig: [],
            },
            mainConfigKey: ["colorConfig", "capacityConfig", "timeConfig"],
            allPrice: {},
            img_url: "",
        }
    },
    watch: {
        selectActive() {
            this.getPrice();
        },
        buyNumber(newValue) {
            let num = String(Math.abs(newValue));
            if (num > 100 || num == 0) {
                this.buyNumber = num == 0 ? 1 : 100;
            } else {
                const numArr = num.split(".")
                if (numArr.length > 1)
                    this.buyNumber = numArr[0]
            }
        },
        selectConfig(newValue) {
            //默认给值是选满的
            let selectActive = true;
            //初始化一个字符串
            let showSelectConfig = "";
            newValue.forEach((item, index) => {
                // 如果有一个item不为number的说明还没有选满
                if (typeof item !== "number") {
                    selectActive = false;
                } else {
                    if (index === 3) {
                        showSelectConfig = this.lease[item] + ',' + showSelectConfig;
                    } else {
                        // 就key属性名
                        const key = this.mainConfigKey[index];
                        // 判断要不要加分号
                        const suffix = index === 2 ? "" : ",";
                        // this.mainConfig 对象里面有中文
                        showSelectConfig += this.mainConfig[key][item].value + suffix;
                    }
                }
                this.showSelectConfig = showSelectConfig;
            })
            this.selectActive = selectActive;

            if (this.selectActive) this.getPrice();
        }
        // }
    },
    methods: {
        getPrice() {
            const showSelectConfigArr = this.showSelectConfig.split(",");
            console.log(showSelectConfigArr, 'showSelectConfigArr');
            const allDataList = [];
            showSelectConfigArr.forEach(title => {
                const item = { title }
                allDataList.push(item)
            })
            const data = {
                allDataList: JSON.stringify(allDataList),
                goods_id: this.id,
                activity_id: this.activity_id,
            }
            this.$sendGet("Goods/getGoodsPrices", data)
                .then(res => {
                    const { data } = res.data;
                    this.allPrice = { ...data };
                    this.img_url = data.meal_img;
                })
        },
        findFlag(index) {
            return this.pact_type.find(item => item == index + 1)
        },
        getAttrData(data) {
            const dataObj = {
                colorConfig: [],
                capacityConfig: [],
                timeConfig: [],
            }
            data.forEach(item => {
                switch (item.type) {
                    case 1:
                        dataObj.colorConfig.push(item)
                        break;
                    case 2:
                        dataObj.capacityConfig.push(item)
                        break;
                    case 3:
                        dataObj.timeConfig.push(item)
                        break;
                }
            })
            for (let i in dataObj) this.mainConfig[i] = dataObj[i]
        },
        getPactType(data) {
            if (typeof data === "object")
                this.pact_type.push(...data)
            else
                this.pact_type.push(data)
        },
        changeValue(flag) {
            flag ? this.buyNumber > 100 ? null : this.buyNumber++ : this.buyNumber > 1 ? this.buyNumber-- : null;
        },
        selectIndex(index, ele) {
            this.selectConfig.splice(index, 1, ele)
        },
        SeeSeeClick() {
            if (!this.selectActive) return;
            const data = {
                goods_id: this.id,
                amount: this.buyNumber,
                spec_id: this.allPrice.leaseId,
                setmeal_id: this.allPrice.setmeal_id,
                activity_id: this.activity_id,
            }
            this.$router.push({ name: "confirm-order", query: { ...data } })
        }
    }
}
</script>
<style lang="scss" scoped>
.container {

    .head {
        position: relative;
        display: flex;

        .close {
            position: absolute;
            width: 20px;
            right: 0;
            top: 0;
            object-fit: contain;
        }

        .info {
            padding: 10px;
            width: 100%;

            .top {
                display: flex;

                img {
                    border: 1px solid #e5e5e5;
                    width: 80px;
                }

                .detail {
                    .price {
                        color: red;

                        .num {
                            font-size: 20px;
                        }
                    }
                }
            }
        }
    }

    .strong-line {
        height: 10px;
        width: 100%;
        background-color: #f6f6f6;
        position: relative;

        &::after,
        &::before {
            content: " ";
            height: 10px;
            width: 50px;
            position: absolute;
            background-color: #f6f6f6;
            display: inline-block;
        }

        &::after {
            right: -10px;
        }

        &::before {
            left: -10px;
        }
    }

    .config {
        padding-top: 10px;
        padding-bottom: 20px;
        border-bottom: 1px solid #efefef;

        .cell {
            // margin-bottom: 10px;

            .title {
                display: inline-block;
                margin-bottom: 10px;
                font-size: 14px;

            }

            .list {

                span {
                    padding: 7px 10px;
                    border-radius: 15px;
                    margin-right: 10px;
                    background-color: #efefef;
                    border: 1px solid #efefef;
                    font-size: 13px;
                    margin-bottom: 10px;

                    &.active {
                        color: red;
                        border: 1px solid red;
                        background-color: #fff3f5;
                    }
                }
            }
        }

        .quantity {
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .change {
                border: 1px solid #efefef;
                display: flex;

                span {
                    display: inline-block;
                }

                .reduce,
                .increase {
                    width: 20px;
                    height: 20px;
                    position: relative;

                    span {
                        display: inline-block;
                        top: 50%;
                        left: 50%;
                        width: 10px;
                        height: 2px;
                        background-color: #b0c6eb;
                        position: absolute;
                        transform: translate(-50%, -50%);

                        &:nth-of-type(2) {
                            transform: translate(-50%, -50%) rotate(90deg);
                        }
                    }
                }

                .reduce {
                    border-right: 1px solid #efefef;
                }

                .increase {
                    border-left: 1px solid #efefef;
                }

                .buy-value {
                    text-align: center;
                    width: 60px;
                    border: 0;
                    outline: 0;
                    line-height: 20px;
                    font-size: 14px;
                }
            }
        }
    }

    .see {
        background-image: linear-gradient(to right, #5c5857, #b8b2b2);
        width: 350px;
        padding: 8px;
        margin-top: 25px;
        text-align: center;
        border-radius: 20px;

        &.active {
            background-image: linear-gradient(to right, #f1281e, #f6635c);
        }

        span {
            color: white;
        }
    }
}
</style>